<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>轮播图实例</title>
    <link rel="stylesheet" href="">
    <style>
        .outer{
            padding: 0;
            width: 900px;
            height: 600px;
            position: relative;
            margin: 100px auto;
            overflow: hidden;
        }
      
        .img li{
            width: auto;
            height:  600px;
            list-style: none;
            top: 0;
            left:0;
            position:absolute;
            
        }
        .img li img {
            width: 100%;
            height: 100%;
        }
        .num{
            position:absolute;
            margin: 0;
            padding: 0;
            bottom: 20px;
            left: 260px;
        }
        .num li{
            display:inline-block;
            width: 20px;
            height: 20px;
            list-style: none;
            border-radius: 50%;
            background-color: darkgray;
            text-align: center;
            line-height: 20px;
            margin-left: 10px;
        }
        .num .active{
            background-color: red;
        }
        .num li:first-child{
            margin-left: 0px;
        }
        .btu{
            margin: 0;
            padding: 0;
            position: absolute;
            width: 40px;
            height: 100px;
            top: 50%;
            margin-top:-50px;
            text-align: center;
            line-height: 100px;
            font-size: 30px;
            color: white;
            background-color: darkgrey;
            opacity: 0.4;
        }
        .right{
            right: 0;
        }
    </style>
</head>
<body>
 <div class="outer">
         <ul class="img">
             <li><a href=""><img src="image/1.jpg" alt=""></a></li>
             <li><a href=""><img src="image/2.jpg" alt=""></a></li>
             <li><a href=""><img src="image/3.jpg" alt=""></a></li>
             <li><a href=""><img src="image/4.jpg" alt=""></a></li>
             <li><a href=""><img src="image/5.jpg" alt=""></a></li>
             <li><a href=""><img src="image/6.jpg" alt=""></a></li>
             <li><a href=""><img src="image/7.jpg" alt=""></a></li>
             <li><a href=""><img src="image/8.jpg" alt=""></a></li>
             <li><a href=""><img src="image/9.jpg" alt=""></a></li>
             <li><a href=""><img src="image/10.jpg" alt=""></a></li>
             <li><a href=""><img src="image/11.jpg" alt=""></a></li>
             <li><a href=""><img src="image/12.jpg" alt=""></a></li>
             <li><a href=""><img src="image/13.jpg" alt=""></a></li>
         </ul>
     <ul class="num">
         <!-- <li class="active">1</li>
         <li>2</li>
         <li>3</li>
         <li>4</li>
         <li>5</li>
         <li>6</li>
         <li>7</li>
         <li>7</li>
         <li>8</li>
         <li>9</li>
         <li>10</li>
         <li>11</li>
         <li>12</li>
         <li>13</li> -->
     </ul>
     <div class="btu left"> < </div>
     <div class="btu right"> > </div>
 </div>
 <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
 <script>
     var i=0;
     var img_num=$(".img li").length;
    for(var j=0;j<img_num;j++){
        $('.num').append('<li></li>');
    }
    $(".num li").eq(0).addClass('active');

    // 手动轮播
    $(".num li").mouseover(function () {
        i=$(this).index();
        $(this).addClass('active').siblings().removeClass("active");
        $(".img li").eq(i).stop().fadeIn(2000).siblings().stop().fadeOut(2000);
    });

    // 自动轮播
   var c = setInterval(GO_R,2000);
   function GO_L() {
       if(i==0){
           i=img_num;
        }
        i--;
        $('.num li').eq(i).addClass('active').siblings().removeClass("active");
        $(".img li").eq(i).stop().fadeIn(2000).siblings().stop().fadeOut(2000);
   }
   function GO_R() {
       if(i==img_num-1){
           i=-1;
       }
       i++;
        $('.num li').eq(i).addClass('active').siblings().removeClass("active");
        $(".img li").eq(i).stop().fadeIn(2000).siblings().stop().fadeOut(2000);
   }

// 定播

     $('.right').click(GO_R);
     $('.left').click(GO_L);

   $('.outer').hover(function (){
       clearInterval(c)},function(){
       c = setInterval(GO_R,2000);
         })

 </script>


</body>
</html>